<template>
  <div id="institutionManage">
    <div class="institution-title">
      <div class="breadCrumb">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/institutionManage' }"
            >机构管理</el-breadcrumb-item
          >
          <el-breadcrumb-item>小组管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="addInstitution" @click="addGroup()">创建小组</div>
    </div>

    <div class="section-block">
      <!-- 筛选区域 -->
      <div class="filter-section">
        <div class="filter-item">
          <div class="backBtn" @click="backFn()">
            <el-button color="#4f46e5">
              <el-icon style="margin-right: 4px"><ArrowLeft /></el-icon>
              返回</el-button
            >
          </div>
          <div class="groupName">四川财经-金融学院</div>
        </div>

        <div class="filter-item">
          <el-input
            v-model="searchGroupName"
            placeholder="输入关键字"
          ></el-input>
          <el-button type="primary" class="search-btn" @click="handleSearch()"
            >搜索</el-button
          >
        </div>
      </div>

      <!-- 表格区域 -->
      <div class="table-section">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="groupName" label="小组名称" align="center" />
          <el-table-column prop="leader" label="负责人" align="center" />
          <el-table-column prop="taskCount" label="任务数量" align="center" />
          <el-table-column prop="memberCount" label="人数" align="center" />
          <el-table-column prop="applyCode" label="申请码" align="center" />
          <el-table-column label="操作" align="center" width="380">
            <template #default="scope">
              <div class="action-btns">
                <el-button
                  link
                  type="primary"
                  class="action-btn group-info-btn"
                  @click="assignTaskFn(scope.row)"
                >
                  <img
                    src="@/assets/img/institutionManagement/fenpei-icon.png"
                    alt=""
                  />
                  分配任务
                </el-button>
                <el-button
                  link
                  type="primary"
                  class="action-btn group-info-btn"
                  @click="memberDetails(scope.row)"
                >
                  <img
                    src="@/assets/img/institutionManagement/details-icon.png"
                    alt=""
                  />
                  人员详情
                </el-button>
                <el-button
                  link
                  type="primary"
                  class="action-btn edit-btn"
                  @click="handleEdit(scope.row)"
                >
                  <el-icon><Edit /></el-icon>
                  修改
                </el-button>
                <el-button
                  link
                  type="danger"
                  class="action-btn delete-btn"
                  @click="handleDelete(scope.row)"
                >
                  <el-icon><Delete /></el-icon>
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页区域 -->
      <div class="pagination-section">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 40]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 分配任务 -->
    <el-dialog
      v-model="showAssignTaskDialog"
      width="30%"
      :close-on-click-modal="false"
    >
      <div class="assign-task-content">
        <label style="margin-right: 7px; color: #0a0a0a; font-size: 14px"
          >选择任务</label
        >
        <el-cascader
          v-model="assignTask"
          :options="taskOptions"
          clearable
          :show-all-levels="false"
        />
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button
            type="primary"
            color="#155EEF"
            size="small"
            @click="saveAssignTask()"
            
            >保存</el-button
          >
          <el-button size="small" @click="showAssignTaskDialog = false"
            >取消</el-button
          >
        </div>
      </template>
    </el-dialog>

    <!-- 创建小组弹窗 -->
    <el-dialog
      v-model="showAddOrEditDialog"
      width="680px"
      :close-on-click-modal="false"
    >
      <div class="addOrEditDialog">
        <el-form
          :model="form"
          label-width="120px"
          :rules="rules"
          ref="addOrEditForm"
        >
          <el-form-item label="小组名称" prop="groupName">
            <el-input v-model="form.groupName" placeholder="请输入小组名称" />
          </el-form-item>
          <el-form-item label="负责人" prop="leader">
            <el-input v-model="form.leader" placeholder="请输入负责人" />
          </el-form-item>
          <el-form-item label="任务数量" prop="taskCount">
            <el-input-number v-model="form.taskCount" :min="0" />
          </el-form-item>
          <el-form-item label="人数" prop="memberCount">
            <el-input-number v-model="form.memberCount" :min="0" />
          </el-form-item>
          <el-form-item label="申请码" prop="applyCode">
            <el-input v-model="form.applyCode" placeholder="请输入申请码" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button size="small" @click="saveAddOrEdit()" color="#155EEF"
            >保存</el-button
          >
          <el-button size="small" @click="showAddOrEditDialog = false"
            >取消</el-button
          >
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchGroupName: "",
      tableData: [
        {
          groupName: "金融理财小组01",
          leader: "李明",
          taskCount: 50,
          memberCount: 50,
          applyCode: "123456",
        },
        {
          groupName: "金融理财小组02",
          leader: "李明",
          taskCount: 50,
          memberCount: 50,
          applyCode: "123456",
        },
        {
          groupName: "金融理财小组03",
          leader: "李明",
          taskCount: 50,
          memberCount: 50,
          applyCode: "123456",
        },
        {
          groupName: "金融理财小组04",
          leader: "李明",
          taskCount: 50,
          memberCount: 50,
          applyCode: "123456",
        },
        {
          groupName: "金融理财小组05",
          leader: "李明",
          taskCount: 50,
          memberCount: 50,
          applyCode: "123456",
        },
      ],
      form: {
        groupName: "", // 小组名称
        leader: "", // 负责人
        taskCount: 0, // 任务数量
        memberCount: 0, // 人数
        applyCode: "", // 申请码
      },
      currentPage: 1, // 当前页
      pageSize: 10, // 每页条数
      total: 100, // 总条数
      showAddOrEditDialog: false,
      showAssignTaskDialog: false,
      assignTask: [],
      taskOptions: [
        {
          value: "1",
          label: "任务1",
          children: [
            {
              value: "1-1",
              label: "任务1-1",
            },
          ],
        },
      ],
      rules: {
        groupName: [
          { required: true, message: "请输入小组名称", trigger: "blur" },
        ],
        leader: [{ required: true, message: "请输入负责人", trigger: "blur" }],
        taskCount: [
          { required: true, message: "请输入任务数量", trigger: "blur" },
        ],
        memberCount: [
          { required: true, message: "请输入人数", trigger: "blur" },
        ],
        applyCode: [
          { required: true, message: "请输入申请码", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 创建小组
    addGroup() {
      this.showAddOrEditDialog = true;
      this.form = {
        groupName: "",
        leader: "",
        taskCount: 0,
        memberCount: 0,
        applyCode: "",
      };
      if (this.$refs.addOrEditForm) {
        this.$refs.addOrEditForm.resetFields();
      }
    },

    // 搜索
    handleSearch() {
      console.log("搜索", this.selectedInstitution, this.selectedDepartment);
    },

    // 查看小组信息
    assignTaskFn(row) {
      console.log("小组信息", row);
      this.showAssignTaskDialog = true;
    },

    // 人员详情
    memberDetails(row) {
      console.log("人员详情", row);
      this.$router.push("/institutionManage/groupMember");
    },

    // 修改
    handleEdit(row) {
      console.log("修改", row);
    },

    // 删除
    handleDelete(row) {
      console.log("删除", row);
    },

    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },

    // 返回
    backFn() {
      this.$router.push("/institutionManage");
    },

    // 保存逻辑
    saveAddOrEdit() {
      console.log("保存", this.form);
    },

    // 保存分配任务
    saveAssignTask() {
      console.log("保存分配任务", this.form);
    },
  },
};
</script>

<style lang="scss" scoped>
#institutionManage {
  width: 1200px;
  margin: 0 auto;

  .institution-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    .text {
      font-weight: bold;
      font-size: 24px;
      color: #0a0a0a;
    }
    .addInstitution {
      padding: 7px 18px;
      background: #4f46e5;
      border-radius: 4px;
      font-size: 16px;
      color: #ffffff;
      text-align: center;
      cursor: pointer;
      &:hover {
        background: #4338ca;
      }
    }
  }

  .section-block {
    padding: 47px 57px 30px 45px;
    margin-bottom: 20px;
    box-shadow: 0px 0px 28px 1px rgba(0, 0, 0, 0.08);
    border-radius: 20px;
    background: #ffffff;
    box-sizing: border-box;

    // 筛选区域
    .filter-section {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      margin-bottom: 40px;

      .filter-item {
        display: flex;
        align-items: center;
        gap: 20px;
      }

      .search-btn {
        margin-left: -10px;
        padding: 10px 20px;
        background: #4f46e5;
        border-color: #4f46e5;
        font-size: 14px;
        border-radius: 4px;
        &:hover {
          background: #4338ca;
          border-color: #4338ca;
        }
      }
    }

    // 表格区域
    .table-section {
      margin-bottom: 30px;

      :deep(.el-table) {
        font-size: 14px;

        .el-table__header th {
          padding: 12px 0;
          font-size: 14px;
          color: #000000;
          background-color: #f3f4f6;
        }

        .el-table__body td {
          padding: 12px 0;
          font-size: 14px;
          color: #000000;
        }
      }

      .action-btns {
        display: flex;
        align-items: center;
        justify-content: center;

        .action-btn {
          display: inline-flex;
          align-items: center;
          gap: 4px;
          font-size: 14px;
          padding: 4px 8px;

          .el-icon {
            font-size: 14px;
            margin-right: 4px;
          }
        }

        .group-info-btn {
          color: #4f46e5;
          img {
            width: 14px;
            height: 12px;
            margin-right: 4px;
          }
        }

        .edit-btn {
          color: #4f46e5;
        }

        .delete-btn {
          color: #ef4444;
        }
      }
    }

    // 分页区域
    .pagination-section {
      display: flex;
      align-items: center;
      justify-content: flex-end;

      :deep(.el-pagination) {
        .btn-prev,
        .btn-next,
        .el-pager li {
          &:hover {
            color: #4f46e5;
          }

          &.is-active,
          &.active {
            color: #4f46e5;
          }
        }
      }
    }
  }

  .addOrEditDialog {
    padding-right: 25px;
    padding-top: 10px;

    .my-data-picker-item {
      width: 80%;
    }
  }

  .assign-task-content {
    padding: 25px 20px;
  }
}
</style>